<template>
  <main class="register-container">
    <h1 class="register-title">注册</h1>
    
    <form class="register-form" @submit.prevent="handleSubmit">
      <!-- 用户名字段 -->
      <div class="form-group">
        <label for="username" class="visually-hidden">用户名</label>
        <input 
          type="text" 
          id="username" 
          class="form-input"
          placeholder="用户名"
          v-model="username"
          required
        />
      </div>

      <!-- 邮箱字段 -->
      <div class="form-group">
        <label for="email" class="visually-hidden">邮箱</label>
        <input 
          type="email" 
          id="email" 
          class="form-input"
          placeholder="邮箱"
          v-model="email"
          required
        />
      </div>

      <!-- 密码字段 -->
      <div class="form-group">
        <label for="password" class="visually-hidden">密码</label>
        <input 
          type="password" 
          id="password" 
          class="form-input"
          placeholder="密码"
          v-model="password"
          required
        />
      </div>

      <!-- 手机号和验证码 -->
      <div class="verification-group">
        <div class="form-group">
          <label for="phone" class="visually-hidden">手机号</label>
          <input 
            type="tel" 
            id="phone" 
            class="form-input"
            placeholder="手机号"
            v-model="phone"
            required
          />
        </div>

        <div class="form-group">
          <label for="verification" class="visually-hidden">验证码</label>
          <input 
            type="text"
            id="verification"
            class="form-input"
            placeholder="验证码"
            v-model="verificationCode"
            required
          />
        </div>
        
        <button 
          type="button"
          class="send-code-btn"
          @click="sendVerificationCode"
          :disabled="isCodeSending"
        >
          发送验证码
        </button>
      </div>

      <button type="submit" class="submit-btn">注册</button>
    </form>

    <div class="home-indicator" role="presentation"></div>
  </main>
</template>

<script>
export default {
  name: 'RegisterForm',
  data() {
    return {
      username: '',  // 用户名
      email: '',     // 邮箱
      password: '',  // 密码
      phone: '',     // 手机号
      verificationCode: '',  // 验证码
      isCodeSending: false  // 是否正在发送验证码
    }
  },
  methods: {
    // 发送验证码请求
    async sendVerificationCode() {
      this.isCodeSending = true;

      try {
        // 调用发送验证码的API
        const response = await this.$axios.post('/user/send-code', {
          phone: this.phone
        });

        if (response.data.success) {
          alert('验证码已发送');
        } else {
          alert('验证码发送失败，请重试');
        }
      } catch (error) {
        console.error('发送验证码失败', error);
        alert('发送验证码失败，请重试');
      } finally {
        this.isCodeSending = false;
      }
    },

    // 处理表单提交
    async handleSubmit() {
      if (!this.username || !this.email || !this.password || !this.phone || !this.verificationCode) {
        alert('请填写所有字段');
        return;
      }

      try {
        const response = await this.$axios.post('/user/register', {
          username: this.username,
          email: this.email,
          password: this.password,
          phone: this.phone,
          verificationCode: this.verificationCode
        });

        if (response.data.success) {
          alert('注册成功');
        } else {
          alert('注册失败，请检查输入');
        }
      } catch (error) {
        console.error('注册失败', error);
        alert('注册失败，请重试');
      }
    }
  }
}
</script>

<style scoped>
/* RegisterForm样式 */
.register-container {
  background: #fff;
  max-width: 600px;  /* 调整为更宽的最大宽度 */
  width: 100%;
  margin: 0 auto;
  padding: 85px 40px 8px;  /* 增加了左右的 padding */
  overflow: hidden;
}

.register-title {
  color: #000;
  font: 510 40px 'SF Pro', sans-serif;
  margin: 0;
}

.register-form {
  margin-top: 26px;
}

.form-group {
  margin-bottom: 16px;
}

.form-input {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px 10px;  /* 减小了上下padding，避免文字被截断 */
  font: 400 16px 'SF Pro', sans-serif;  /* 调整了字体大小 */
  background: #fff;
  box-sizing: border-box; /* 使padding不影响输入框总宽度 */
  line-height: 1.5;  /* 设置行高，确保文字不被挤压 */
  height: 45px; /* 确保输入框高度合适 */
}

.verification-group {
  display: flex;
  gap: 0;
}

.verification-group .form-group {
  flex: 1;
  margin-bottom: 0;
}

.verification-group .form-input {
  border-radius: 8px 0 0 8px;
}

.send-code-btn {
  border-radius: 0 8px 8px 0;
  background: #1e1e1e;
  color: #fff;
  border: 1px solid #d9d9d9;
  padding: 14px 30px;
  font: 400 16px 'Inter', sans-serif;
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  border-radius: 40px;
  background: #000;
  color: #fff;
  border: none;
  padding: 9px 14px;
  margin-top: 25px;
  font: 400 16px/1 'SF Pro', sans-serif;
  letter-spacing: -0.23px;
  cursor: pointer;
}

.home-indicator {
  width: 144px;
  height: 5px;
  background: #000;
  border-radius: 100px;
  margin: 547px auto 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>
